<template>
  <div>
    <el-dialog :visible.sync="showChildDialog" v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose"
               title="上传图片"
    >
      <el-form ref="elForm" :model="formData" size="medium" label-width="100px"
               label-position="left"
      >
        <el-form-item label-width="126px" label="上传图片" >
          <image-upload ref="imageUpload" :webkitdirectory.sync="webkitdirectory" :uploadImgUrl="uploadImgUrl" @deleteFile="deleteFiles" :fileSize="20"></image-upload>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {deleteFile,uploadOtherPic} from '@/api/mall/product';
import {getPictureByAssociatedId} from '@/api/system/attachment';

export default {
  name: 'importPic',
  inheritAttrs: false,
  components: {},
  props: {
    importOpen: {
      type: Boolean,
      default: false
    },
    webkitdirectory: {
      type: Boolean,
      default: false
    },
    associatedId: {
      type: String,
      default: null
    },
    productId:{
      type: String,
      default: null
    },
    importType:{
      type: String,
      default: "otherImage"
    }
  },
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/mall/product/upload",
      formData: {
        deviceType: null,
        qrCode: null
      },
      oldList:[]
    }
  },
  computed: {
    showChildDialog: {
      get: function() {
        return this.importOpen
      },
      set: function(newValue) {
        this.$emit('update:importOpen', newValue) // 触发更新事件，父组件的showDialog会自动更新
      }
    }
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    onOpen() {
      this.getPicture()
    },
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.showChildDialog=false
     /*  if(this.$refs.imageUpload.fileList.length>0){
        deleteFile({fileIds:this.$refs.imageUpload.fileList.map(file=>file.fileId).join(',')})
        this.$refs.imageUpload.fileList=[]
      } */
      this.$refs['elForm'].resetFields()

    },
    getPicture(){
      if(this.associatedId){
        getPictureByAssociatedId(this.associatedId).then(res=>{
          this.$refs.imageUpload.fileList=res.data
          if(res.data){
            this.oldList= res.data.map(item=>item.fileId)
          }else {
            this.oldList=[]
          }

        })
      }else {
        this.$refs.imageUpload.fileList=[]
        this.oldList=[]
      }

    },
    deleteFiles(fileList,callback){
      callback({data:1})
     /*  if(fileList.length>0){
        deleteFile({fileIds:fileList.map(file=>file.fileId).join(',')}).then(res=>callback(res))
      } */
    },
    handleConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        const fileList = this.$refs.imageUpload.fileList
        /* if(fileList.length===0){
          this.$modal.msgError('上传图片再提交')
          return
        } */

        const param={productId:this.productId}
        if(this.oldList){
          const files = fileList.map(item=>item.fileId)
          param.deleteFileIds=this.oldList.filter(ll=>!files.includes(ll))
        }
        if(this.importType === 'otherImage'){
          param.otherImage=this.associatedId
          param.otherImages=fileList
        }else {
          param.qualificationsImage=this.associatedId
          param.qualificationsImages=fileList
        }
        uploadOtherPic(param).then(res=>{
          if(res.code===200){
            this.$modal.msgSuccess('上传成功')
            this.showChildDialog=false
            this.$emit("importSuccess");
            this.$refs['elForm'].resetFields()
            this.$refs.imageUpload.fileList=[]
            return
          }
          this.$modal.msgError('上传失败')
        })

      })
    },
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
